<script setup>
// 输入框输入你的计划，
// 添加到你的代办列表
// 页面中的元素的变化，都要通过数据来驱动管理
// 组件生命周期函数：是在组件特定时刻自动执行的函数
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';
const list = ref([]);
const text = ref('');
const time = ref('');
let timerId = null;
const addItem = () => {
    if(text.value){
        list.value.push(text.value)
    }else{
        alert('请输入数据')
    }
}
const deleteItem = (item) => {
    list.value = list.value.filter(i => i!=item)
}
// 数组的迭代方法：forEach、map、filter、every、some
// const arr = [1,2,3,4,5,6];
// const newArr = arr.filter((item)=>{
//     return item%2 != 0
// })
// console.log(newArr)

onMounted(()=>{
    console.log('mounted')
    // 挂载成功后只执行一次
    // 发请求fetch()
    // 事件添加
    // 定时器
    timerId = setInterval(()=>{
        console.log('time')
        time.value = new Date().toLocaleTimeString()
    },1000)
})
console.log('start')
onUpdated(()=>{
    // 一有状态变化，就执行
    console.log(123)
})
onUnmounted(()=>{
    clearInterval(timerId)
})
</script>
<template>
    <h2>{{ time }}</h2>
    <h1>待办事项-共 {{ list.length }} 条</h1>
    <!-- 双向数据绑定 -->
    <input v-model="text" type="text">
    <button @click="addItem">添加</button>
    <ul>
        <li v-for="item in list">
            {{ item }}
            <button @click="deleteItem(item)">删除</button>
        </li>
    </ul>
    <h2 v-if="list.length==0">暂无数据</h2>
</template>